<template>
  <div class="hc-tab">
    <div class="hc-reagent-tabs">
      <div
        :class="{ 'reagent-tab-items': true, 'reagent-tab-items-choosed': item.name === activeName }"
        @click="activeName = item.name"
        v-for="item in props.tabs"
        :key="item.name"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="reagent-tab-content">
      <component :is="currentItem.component" v-bind="currentItem.props || {}" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    defaultTab: string | number;
    background?: string;
    choosedColor?: string;
    tabHeadBg?: string;
    tabs: {
      label: string;
      name: string;
      component?: any;
      props?: any;
    }[];
  }>(),
  {
    background: "linear-gradient(#37403f, #2b3332)",
    choosedColor: "#374246",
    tabHeadBg: "linear-gradient(#374040, #283030)",
  }
);

const bgStyle = props.background;
const tabHeadBg = props.tabHeadBg;
const bgChoosedStyle = props.choosedColor;
const activeName = ref(props.defaultTab);

const currentItem = computed(() => {
  return props.tabs.find((item) => item.name === activeName.value)!;
});
</script>

<style lang="scss" scoped>
.hc-tab {
  height: 100%;
  .hc-reagent-tabs {
    height: 4.285714rem /* 60/14 */;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    .reagent-tab-items {
      height: 2.857143rem /* 40/14 */;
      line-height: 2.857143rem /* 40/14 */;
      width: 8.571429rem /* 120/14 */;
      text-align: center;
      border: 1px solid black;
      background: v-bind(tabHeadBg);
      margin: 0 5px;
      cursor: pointer;
    }
    .reagent-tab-items-choosed {
      border-bottom: 1px solid #2e363a;
      background: none;
      background-color: v-bind(bgChoosedStyle);
      border-top: 3px solid #84d8d1;
    }
  }

  .reagent-tab-content {
    height: calc(100% - 4.285714rem /* 60/14 */);
    background: v-bind(bgStyle);
  }
}
</style>
